<template>
	<view class="zh-u-select display-flex justify-between align-center" :class="{'border-bottom':props.border}" @click="click">
		<view class="left flex display-flex">
			<text class="title" v-if="props.title" :style="titleStyle">
				<text>{{ props.title }}</text>
				<text v-if="getRequired === true" class="red ml-10">*</text>
			</text>
			<u-date :mode="props.mode" :date="props.value" v-if="props.mode"></u-date>
			<view class="display-inline" v-else>
				<text class="text" v-if="props.value">{{ props.value }}</text>
				<text class="placeholder" v-else>{{ props.placeholder }}</text>
			</view>
		</view>
		<view class="right">
			<image v-show="props.arrow" src="@/static/icons/right_arrow.png" class="right-arrow-icon" :arrow="props.arrow"/>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	
	const props = withDefaults(defineProps<{
		title?: string
		border?: boolean
		arrow?: boolean
		placeholder?: string
		value?: string
		rules?:any
		labelWidth?:string
		mode?:string
	}>(), {
		border: true,
		arrow: true,
		value:''
	})
	const titleStyle = {
		width:uni.upx2px(Number(props.labelWidth)) + 'px'
	}
	const getRequired = computed(() => {
		if(props.rules) {
			for(let i in props.rules) {
				if(props.rules[i].required === true) {
					return true
				}
			}
		}
		return false
	})
	
	const emit = defineEmits(['click'])
	
	const click = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.zh-u-select {
		padding: 40rpx 0;
		.left {
			.title {
				//width: 160rpx;
				font-weight:bold;
				font-size: $uni-font-size-base;
				color:$uni-text-color-light-black;
				display:inline-block;
				.red {
					color:#ff0000;
				}
			}
			.text {
				color:$uni-text-color-light-black;
				font-size: $uni-font-size-26;
			}
			.placeholder {
				color:$uni-text-color-grey;
				font-size: $uni-font-size-26;
			}
		}
		.right {
			.right-arrow-icon {
				width: 13rpx;
				height: 25rpx;
				margin-left: 20rpx;
			}
		}
		&.border-bottom {
			border-bottom:1rpx solid $uni-border-color;
		}
	}
</style>